<template>
  <div class="Talent_pool">
    <!-- 招聘会预定 -->
    <div class="Talent_pool_top">
      <h3 class="details">投递详情</h3>
      <div class="jobtypeStatus">
        <el-button type="primary" class="span-hasEnded"
          :class="{'span-onlineBooking': jobtypeStatusIndex== (index==0 ? '' : index)}" @click="jobtypeStatus(index)"
          v-for="(item,index) in jobtypeStatusBtn" :key="index">{{jobtypeStatusBtn[index][1]}}</el-button>
      </div>
      <!-- 投递详情列表 -->
      <personal-centerList ref="child"></personal-centerList>
    </div>

    <div class="Talent_pool_son">
      <Recommend @updateData="updateData"></Recommend>
    </div>
  </div>
</template>
<script>
// 投递详情列表组件
import personalCenterList from '@/components/page/components/personalCenterList'
// 根据求职意向为您推荐
import Recommend from '@/components/page/components/Recommend'

export default {
  name: 'PersonalCenter',
  components: {
    personalCenterList,
    Recommend
  },
  data () {
    return {
      jobtypeStatusIndex: '',
      // 选择状态查询
      jobtypeStatusBtn: {
        0: ['span-onlineBooking', '不限'],
        1: ['span-hasEnded', '投递成功'],
        2: ['span-hasEnded', '被查看'],
        3: ['span-hasEnded', '有意向'],
        4: ['span-hasEnded', '邀请面试'],
        5: ['span-hasEnded', '不合适']
      },
    }
  },
  methods: {
    open (Number) {
      this.$confirm(`当前展位已有${Number}家企业正在排队预约审核中，您可选择其他展位，如其他企业审核成功，将取消您的预约。`, '', {
        confirmButtonText: '继续预约',
        cancelButtonText: '看看别的',
        customClass: 'message-logout'
      }).then(() => {
      }).catch(() => {
      });
    },
    // 状态val
    jobtypeStatus (val) {
      if (val == '0') {
        this.jobtypeStatusIndex = ''
      } else {
        this.jobtypeStatusIndex = val
      }
      // tab切换时将分页状态赋值为初始值1
      this.$refs.child.query.page = 1;
      this.$refs.child.deliverListPage(this.jobtypeStatusIndex);
    },
    getRouterData () {
      // this.ruleForm.jobFairId = this.$route.query.id
      // console.log('this.ruleForm.jobFairId', this.ruleForm.jobFairId)
    },
    updateData () {
      this.$refs.child.deliverListPage()
    }
  },
  created () { }
  //   watch: {
  //   "ruleForm.companyContact": {
  //     handler(newValue, oldValue) {}
  //   }
  // }
}
</script>

<style lang="css" scoped>
.Talent_pool {
    /* padding: 0px 44px; */
    width: calc(100% - 88px);
    background: rgb(246, 246, 248);
    /* border: 1px solid red; */
}
.Talent_pool_top {
    padding: 0 44px;
    background-color: white;
}
.details {
    line-height: 64px;
    color: #222222;
    font-size: 16px;
}
.jobtypeStatus /deep/ .span-onlineBooking {
    background: #409eff !important;
    color: #fff !important;
}
.jobFair_btnSee /deep/ .span-booked,
.jobtypeStatus /deep/ .span-booked {
    background: rgba(177, 222, 255, 1);
}
.jobFair_btnSee /deep/ .span-hasEnded,
.jobtypeStatus /deep/ .span-hasEnded {
    background: rgba(0, 0, 0, 0);
}
.jobtypeStatus /deep/ .span-hasEnded {
    margin-right: 32px;
    border-radius: 0px;
    color: #000;
}
.jobFair_btnSee /deep/ .span-appointmentpassed {
    background: rgba(0, 155, 62, 1);
}
.jobFair_btnSee /deep/ .span-notPass {
    background: rgba(253, 78, 64, 1);
}
.jobFair_btnSee /deep/ .el-button--primary,
.jobtypeStatus /deep/ .el-button--primary {
    border-color: rgb(0, 0, 0, 0);
    padding: 8px 12px;
}
</style>

<style>
.message-logout .el-message-box__btns {
    text-align: center !important;
}
.message-logout .el-message-box__header {
    padding: 30px 15px 10px;
}
.message-logout .el-message-box__content {
    border-top: 2px solid rgba(0, 147, 255, 1);
}
.message-logout .el-message-box__headerbtn .el-message-box__close {
    color: #1893fc;
}
</style>